/**
 * 实时组合监控
 */
import React, {Component} from 'react';
import {connect} from 'dva';
import {routerRedux} from 'dva/router'
import {Row, Col,  Card} from 'antd';
import moment from 'moment';
import '../common.less'
import {
    Tabtitle,
    List,
    IECharts,
    NoData
  } from '../../../../components'
import {
    ToolBar,
    TradeOverview,TargetRatio,
    TradeRate,PriceDifference
  } from '../components'

import style from './index.less'

const Realtime = ({dispatch, realtime,location}) => {
  const {pathname,query}=location
  const tag='realtime'
  const {
    date,
    fundId,
    fundList,
    summary,
    listPerformance,
    listsum,
    stockBalance,
    costTrend,
    spreadCaptureHist
  } = realtime
  const resultStatus=summary&&stockBalance&&listsum&&spreadCaptureHist&&listPerformance

  const toolbarProps={
    date,
    fundId,
    fundList,
    dispatch,
    location,
    tag
  }
  const tradeOverviewProps={
      data:summary
    },
    targetRatioProps={
      dispatch,

    	fundId,
    	data:stockBalance,
      location,
      tag
    },
    CostRemarkProps={
      data:listsum
    },
    tradeRateProps={
      data:summary
    },
    priceDifferenceProps={
      data:spreadCaptureHist
    },
    qualityRemarkProps={
      data:listPerformance
    }
  return (
    <div className={`tca ${style.realtime}`}>
      <Tabtitle value={'实时组合监控'}/>
      <div className="content-inner">
        <ToolBar {...toolbarProps} />
        {
          resultStatus?<div className="main-content">
            <Card title="交易概览" bordered={false}  className={`module ${style.overview}`}>
              <Row gutter={24}>
              <Col span={9}>
                <div className="table">
                  <TradeOverview {...tradeOverviewProps} />
                </div>
              </Col>
              <Col span={9}>
                <TargetRatio {...targetRatioProps} />
              </Col>
              <Col span={6}>
                <div className="list">
                  <List {...CostRemarkProps}/>
                </div>
              </Col>
              </Row>
            </Card>
            <Card title='交易质量' bordered={false}  className={`module ${style.quality}`}>
              <Row gutter={24}>
                <Col span={9}>
                  <TradeRate {...tradeRateProps}/>
                </Col>
                <Col span={9}>
                  <PriceDifference {...priceDifferenceProps} />
                </Col>
                <Col span={6}>
                  <div className="list">
                    <List {...qualityRemarkProps}/>
                  </div>
                </Col>
              </Row>
            </Card>

          </div>:<NoData/>

        }

      </div>
    </div>
  );


}

Realtime.propTypes = {
};

export default connect(({realtime}) => ({realtime}))(Realtime);
